<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	
	<script type="text/javascript">
		$(function () {

            // select 是标签选择器
            // eq(0)表示选择页面上的第一个
            // eq(1)表示选择页面上的第二个
            // '>' 表示 选择子元素
            // ':selected' 表示 选择“被选中的”option
            // 'appendTo( )' 能够将jquery对象追加到指定的位置
			$("#toRightBtn").click(function () {
				//向右移动按钮
                $("select:eq(0) > option:selected").appendTo("select:eq(1)");
            });
            $("#toLeftBtn").click(function () {
                //向左移动按钮
                $("select:eq(1) > option:selected").appendTo("select:eq(0)");
            });
            // 解决bug  提交的时候 全选  一下
			$("#submitBtn").click(function () {
				// 在提交表单前把已分配  部分的option 全部选中
				$("select:eq(1) > option").prop("selected","selected");
				//测试上面这一行代码是否有效，我们暂时不让表单提交
				//return false;
            });
        });
		
	</script>
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
	<div class="container-fluid">
		<%@ include file="/WEB-INF/include-sidebar.jsp"%>
		
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<ol class="breadcrumb">
				<li><a href="admin/to/main/page.ht">首页</a></li>
				<li><a href="admin/get/page.ht">数据列表</a></li>
				<li class="active">分配角色</li>
				<li style="color: blue" class="active">为账号：${requestScope.loginAcct} 分配角色</li>
			</ol>
			<div class="panel panel-default">
				<div class="panel-body">
					<form action="assign/do/role/assign.ht" method="post" role="form" class="form-inline">
						
						<input type="hidden" name="adminId" value="${param.adminId}">
						<input type="hidden" name="pageNum" value="${param.pageNum}">
						<input type="hidden" name="keyword" value="${param.keyword}">
						
						<div class="form-group">
							<label for="exampleInputPassword1">未分配角色列表</label><br>
							<select
									class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
								<c:forEach items="${requestScope.unAssignRoleList}" var="role">
									<option value=${role.id}>${role.name}</option>
								</c:forEach>
							</select>
						</div>
						<div class="form-group">
							<ul>
								<li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
								<br>
								<li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
							</ul>
						</div>
						<div class="form-group" style="margin-left:40px;">
							<label for="exampleInputPassword1">已分配角色列表</label><br>
							<select
									name="roleIdList"
									class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
								<c:forEach items="${requestScope.assignRoleList}" var="role">
									<option value=${role.id}>${role.name}</option>
								</c:forEach>
							</select>
						</div>
						<br>
						<br>
						<button id="submitBtn" type="submit" style="width:350px; height: 40px" class="btn btn-lg btn-success btn-block">保存</button>
					</form>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>
